<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
<meta charset="UTF-8" />
<title>index</title>
</head>
<body onload="onload()">
<noscript><h2 style="color: #ff0000">您的浏览器不支持websocket</h2></noscript>
<div>
    <div>
        <div style="float:right;">
            <button id="logout" onclick="logout();">登出</button>
        </div>
    </div>
    <div>
        <button id="connect" onclick="connect();">连接</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
        <div>——————————————————————————————</div>
    </div>
    <div id="sendMessage">
        <div>
            <label>发送广播：</label>
            <div><label>广播内容：<input id="broadcastContent" /></label></div>
            <div><button onclick="sendBroadcast();">发送</button></div>
        </div>
        <div>——————————————————————————————</div>
        <div>
            <label>发送聊天：</label>
            <div><label>目标用户名：<input id="chatTarget" /></label></div>
            <div><label>聊天内容：<input id="chatContent" /></label></div>
            <div><button onclick="sendChat();">发送</button></div>
        </div>
        <div>——————————————————————————————</div>
    </div>
    <div id="conversationDiv">
        <div><label>广播消息：</label><span id="broadcast"></span></div>
        <div><label>聊天消息：</label><span id="chat"></span></div>
    </div>
</div>
<script type="text/javascript" th:src="@{/js/sockjs.min.js}"></script>
<script type="text/javascript" th:src="@{/js/stomp.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript">
    var stompClient = null;

    function setConnected(connected) {
        document.getElementById('connect').disabled = connected;
        document.getElementById('disconnect').disabled = !connected;
        document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
        document.getElementById('sendMessage').style.visibility = connected ? 'visible' : 'hidden';
        $('#response').html();
    }

    function connect() {
        var socket = new SockJS('/endpoint'); // 链接SockJS 的endpoint 名称为"/endpoint"
        stompClient = Stomp.over(socket); // 使用stomp子协议的WebSocket 客户端
        stompClient.connect({}, function(frame) { // 链接Web Socket的服务端。
            setConnected(true);
            // 订阅广播消息
            stompClient.subscribe('/topic/broadcast', function(respnose) {
                showBroadcast(JSON.parse(respnose.body));
            });
            // 订阅聊天消息
            stompClient.subscribe('/user/topic/chat', function(respnose) {
                showChat(JSON.parse(respnose.body));
            });
        });
    }

    function disconnect() {
        if (stompClient != null) {
            stompClient.disconnect();
        }
        setConnected(false);
        console.log("Disconnected");
    }

    function sendBroadcast() {
        var content = $("#broadcastContent").val();
        if (content) {
            $.ajax({
                url: "/broadcast",
                type: "post",
                data: {
                    content: content
                },
                success: function(data) {
                    if (data==="ok") {
                        alert("发送成功");
                    } else {
                        alert("发送失败");
                    }
                },
                error: function() {
                    alert("发送广播出错了");
                }
            });
        }
    }

    function sendChat() {
        var target = $("#chatTarget").val();
        var content = $("#chatContent").val();
        if (target && content) {
            $.ajax({
                url: "/chat",
                type: "post",
                data: {
                    target: target,
                    content: content
                },
                success: function(data) {
                    if (data==="ok") {
                        alert("发送成功");
                    } else {
                        alert("发送失败");
                    }
                },
                error: function() {
                    alert("发送聊天出错了");
                }
            });
        }
    }

    function showBroadcast(response) {
        var broadcast = $("#broadcast");
        broadcast.html(JSON.stringify(response));
    }

    function showChat(response) {
        var chat = $("#chat");
        chat.html(JSON.stringify(response));
    }

    function onload() {
        checkLogin();
        disconnect();
    }

    function checkLogin() {
        $.ajax({
            url: "/checkLogin",
            type: "post",
            success: function (data) {
                if (data==="error") {
                    location.href = "/";
                }
            },
            error: function() {
                location.href = "/";
            }
        });
    }

    function logout() {
        $.ajax({
            url: "/logout",
            type: "post",
            success: function (data) {
                location.href = "/";
            },
            error: function() {
                location.href = "/";
            }
        });
    }
</script>
</body>
</html>
